<template>
  <div>
    <div class="nav-city">
      <div class="city-tips"><span>当前定位城市</span><span>定位不准时,请在城市列表中选择</span></div>
      <div class="guess-city">
        <span></span>
        <i class="iconfont icon-youjiantou"></i>
      </div>
    </div>
    <div class="hot-city-container">
      <h4>热门城市</h4>
      <ul>
        <li v-for="(item,index) in hotCitylist" :key="index">{{item.name}}</li>
      </ul>
    </div>
    <div class="group-city-container" v-for="(item,key,index) in groupCitynum" :key="index" >
      <div class="group-city-title">{{key}}<span>(按字母排序)</span></div>
        <GroupCity :groupcitylist='item'></GroupCity>
    </div>
  </div>
</template>

<script>
import GroupCity from './groupCity_A'
export default {
  components:{
    GroupCity,
  },
data() {

  return {
    hotCitylist:[],
    groupCitynums:{},
  }
},

computed:{
groupCitynum:function(){
  return this.objKeySort(this.groupCitynums);
}
},
methods: {
  objKeySort(obj) {//排序的函数
    var newkey = Object.keys(obj).sort();
    var newObj = {};//创建一个新的对象，用于存放排好序的键值对
    for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
        newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
    }
    return newObj;//返回排好序的新对象
}
},
created() {
  this.$axios.combineRequest(['https://elm.cangdu.org/v1/cities?type=hot','https://elm.cangdu.org/v1/cities?type=group'],(res1,res2)=>{
    this.hotCitylist = res1;
    this.groupCitynums = res2,
    console.log(this.groupCitynum);
  })
},
}
</script>

<style lang="less">

.nav-city {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  background-color: #fff;
  div{
    height: 33px;
    align-items: center;
  }
  .city-tips {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0;
    border-bottom: 1px solid #e4e4e4;
    span:first-of-type {
      color: #333;
      font-size: 12px;
    }
    span:last-child {
      color: #9f9f9f;
      font-size: 12px;
      font-weight: 600;
    }
  }
  .guess-city {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 2px solid #e4e4e4;
    i {
      font-size: 14px;
      font-weight: 600;
    }
  }
}

.hot-city-container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin-bottom: 20px;
  h4 {
    font-size: 12px;
    text-align: left;
    color: #666;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e4e4e4;
    li{
      color: #3190e8;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      width: 25%;
      box-sizing: border-box;
      border-top: 1px solid #e4e4e4;
      border-right: 1px solid #e4e4e4;
      li:nth-child(4n){
        border-right: none;
      }
    }
  }
}

.group-city-container{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin-bottom: 20px;
  .group-city-title{
    font-size: 12px;
    text-align: left;
    color: #666;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    span{
      font-size: 12px;
      color: #999;
    }
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e4e4e4;
    li{
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      width: 25%;
      box-sizing: border-box;
      border-top: 1px solid #e4e4e4;
      border-right: 1px solid #e4e4e4;
      li:nth-child(4n){
        border-right: none;
      }
    }
  }
}
</style>